<template>
    <div class="container_bg">
        <div class="login_form">
            <div class="login-title">
                <span class="ch-title">登录/</span>
                <span class="en-title">LOGIN</span>
            </div>
            <el-form :model="loginForm" class="login-form" label-width="0px">
                <el-form-item prop="login_id">
                    <el-input :prefix-icon="Avatar" v-model="loginForm.username" placeholder="请输入登录帐号">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input :prefix-icon="Lock" v-model="loginForm.password" placeholder="请输入密码" type="password"
                        show-password></el-input>
                </el-form-item>

                <!-- <el-button type="primary" class="login-btn" :disabled="!checkLoginForm" -->
                <el-button type="primary" class="login-btn" @click="handleLogin('loginForm')">登录</el-button>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue';
import { Lock, Avatar } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
const state = reactive({
    loginForm: {
        username: '',
        password: '',
    },
    userCode: ''
})
const { loginForm, userCode } = toRefs(state)
const router = useRouter()

const handleLogin = () => {
    router.push('/about')
}
</script>

<style lang="less" scoped>
.container_bg {
    height: 100vh;
    width: 100vw;
    background-image: url(../assets/img/login-bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .login_form {
        min-width: 25%;
        position: absolute;
        right: 15%;
        top: 35%;
        text-align: center;
        box-sizing: border-box;
        padding: 10px;

        .login-title {
            margin-bottom: 20px;

            .ch-title {
                color: #fff;
                font-size: 32px;
                font-weight: 700;
                letter-spacing: 3px;
                transition: all 0.3s;

            }

            .en-title {
                font-size: 26px;
                color: #fff;
                opacity: 0.37;
                transition: all 0.3s;
            }
        }



        .el-form-item {
            margin-bottom: 35px;

            .el-input {
                font-size: 26px;

                .el-input__icon {
                    width: 50px;
                    line-height: 60px;
                    color: #1973e3;
                }
            }

            :deep(.el-input__inner) {
                height: 50px !important;
                line-height: 60px;
                font-size: 16px;
            }
        }

    }
}
</style>